<template>
    <el-card>
        <!-- 商品列表 -->
        <div slot="header">
            <span>商品分类</span>
            <el-button type="primary" @click="flage1 = true">添加分类</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">

            <el-table-column label="序号" type="index" width="60"></el-table-column>
            <el-table-column label="ID" width="80" prop="id"></el-table-column>

            <el-table-column label="分类名称" width="200">
                <template slot-scope="scope">
                    <el-input v-if="scope.row.editState" v-model="scope.row.cateName"></el-input>
                    <span v-else>{{ scope.row.cateName }}</span>
                </template>
            </el-table-column>

            <el-table-column label="是否启用" width="120">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.state" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="0" :disabled="!scope.row.editState"></el-switch>
                </template>

            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.editState" size="mini" @click="success(scope.row)">完成</el-button>
                    <el-button v-else size="mini" @click="scope.row.editState = true">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination @current-change="CurrentChange" :current-page="page" :page-size="pagesize"
                layout="total,  prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <!-- 添加分类模态框 -->
        <el-dialog title="添加分类" :visible.sync="flage1">
            <el-form :model="addform" :rules="rules" ref="form">

                <el-form-item label="分类名称" :label-width="'100px'" prop="cateName">
                    <el-input v-model="addform.cateName" autocomplete="off" placeholder="分类名称"></el-input>
                </el-form-item>

                <el-form-item label="是否启用" :label-width="'100px'">
                    <el-switch v-model="addform.state" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="add">确定</el-button>
            </div>
        </el-dialog>

    </el-card>
</template>
<script>
import { addCate, cateList, delCate, editCate } from '@/api/goods.js'
export default {
    data () {
        return {
            //添加分类的模态框默认关闭
            flage1: false,
            //定义添加分类的验证
            rules: {
                cateName: [{ required: true, message: '请输入类名', trigger: 'blur' }]
            },
            // 分类列表数据
            tableData: [],

            //分页数据
            page: 1,
            pagesize: 8,
            total: 0,

            //添加分类的数据
            addform: {
                cateName: '',
                state: 1
            },

        }
    },
    methods: {
        //修改分类
        async success (row) {
            let res = await editCate(row)
            if (res.data.code === 0) {
                this.tableData.editState = false
                this.getDate()
            };
        },
        //删除分类
        async del (row) {
            let res = await delCate({ id: row.id })
            if (res.data.code === 0) {
                this.getDate()
            };
        },
        //当前页面改变时触发
        CurrentChange (val) {
            this.page = val
            this.getDate()
        },
        //添加分类
        add () {
            this.$refs.form.validate(async res => {
                if (res) {
                    let res = await addCate(this.addform)
                    if (res.data.code === 0) {
                        this.flage1 = false
                        this.getDate()
                    };
                };
            })
        },
        //获取分类列表
        async getDate () {
            let res = await cateList({ currentPage: this.page, pageSize: this.pagesize })
            this.total = res.data.total
            this.tableData = res.data.data.map(v => {
                v.editState = false
                return v
            })
        }
    },
    //
    created () {
        this.getDate()
    }
}
</script>

<style lang="less" scoped>
//添加分类
:deep(.el-card__header) {
    &>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

}
</style>